{% if 'msg' in pd.keys() %}
   <!-- 隐藏框里面放关于增删改查的信息--> 
         <input type='hidden' value="{{pd.msg[0]}}" id="showdownbox" />
   	   {% set res = pd.msg[0] %}
          {% endif %}
		  
      <input type='hidden' value="{{request.args.get('res','')}}" id="res_arg" /><!-- 如果删除成功后信息将显示在这里 -->
     <div class="dropshowdown">
         <span style="font-size:25px;font-family: 楷体;">{{res}}{{request.args.get('res','')}}</span>  <!-- 信息弹出框-->
     </div>
	
<p align="left"> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">新加用户</button></p>  
	  <form method="post" action="/admin_user?name={{name}}">
	  <Label>用户名:<input name="uname" value="{{ request.values.get('uname','')}}"></Label>
	  <Label>地址:<input name="liveaddress" value="{{ request.values.get('liveaddress','')}}"></Label>
      <Label>职业:<input name="career" value="{{ request.values.get('career','')}}"></Label>
	  <Label>邮箱:<input name="address" value="{{ request.values.get('address','')}}"></Label>
	  <Label>电话:<input name="tel" value="{{ request.values.get('tel','')}}"></Label>
	  <input class="btn btn-primary" type="submit" value="查询" id="my_button">
	  <input type="hidden" name="msg1" id="msg1" value="{{request.values.get('msg1','')}}">
<table width="100%" class="table table-bordered table-striped table-hover">
	 <tr>
	<th>用户编号</th><th>用户头像</th><th>用户名</th><th>密码</th><th>地址</th><th>邮箱</th><th>职业</th><th>电话号码</th><th>个人介绍</th><th>操作</th>
	</tr>
	            {% for u in pd.page.items %}
	                <tr id="tr1">
	                    <td>{{ u.uid }}</td>
	                    <td><img src="/showprofileimg={{u.uname}}" alt="没有提供图片" width="100px" height="80px"></td>
	                    <td>{{ u.uname}}</td>
	                    <td><p id="passwordcontent{{ u.uid }}">••••••••••</p><button type="button" class="mybtn2" id="showbtn{{u.uid}}" onclick="toggleContent{{ u.uid }}()">
						显示</button><input type="hidden" value="{{u.password}}"></td>
						<script>
							function toggleContent{{ u.uid }}() {
							            var contentCell = document.getElementById('passwordcontent{{ u.uid }}');
										var showbtn =  document.getElementById('showbtn{{ u.uid }}');
							            if (contentCell.innerHTML === '{{u.password }}') {
							                contentCell.innerHTML = '••••••••••';
							            } else {
							                contentCell.innerHTML = '{{u.password }}';
							            }
										if (showbtn.innerHTML === '隐藏') {
										        showbtn.innerHTML = '显示';
										    } else {
										       showbtn.innerHTML = '隐藏';
										    }
										}
						</script>
	                    <td>{{ u.liveaddress }}</td>
	                    <td>{{u.address }}</td>
	                    <td>{{ u.career}}</td>
						<td>{{ u.tel}}</td>
						<td>{{ u.usermsg}}</td>
	                    <td>
	                        <a href="udel/{{u.uid}}/{{pd.page.page}}" onclick="return confirm('你确定删除吗？')">删除</a>
	                        <a href="#" class="edita" data-target="#myModal2" data-toggle="modal">编辑</a>
	                    </td>
	                </tr>
	            {% endfor %}
	        </table>
	        <div style="text-align: center;">
	            总记录条数:{{pd.page.total}} 每页显示记录数:{{ pd.page.per_page }} 总页数:<span id="allPage">{{pd.page.pages}}</span>
	            <input class="btn btn-default" type="button" value="首页" onclick="toPage(1)" {% if pd.page.page == 1 %}disabled{%endif%}>
	            <input class="btn btn-default" type="button" value="上一页" onclick="toPage({{pd.page.prev_num}})" {% if pd.page.page == 1 %}disabled{%endif%}>
	            当前页:<input value="{{pd.page.page}}" size="3" name="currpage" onchange="toPage(this.value)">
	            <input class="btn btn-default" type="button" value="下一页" onclick="toPage({{pd.page.next_num}})" {% if pd.page.page == pd.page.pages %}disabled{%endif%}>
	            <input class="btn btn-default" type="button" value="末页" onclick="toPage({{pd.page.pages}})" {% if pd.page.page == pd.page.pages %}disabled{%endif%}>
	            <script>
	                function toPage(val){//val表示当前页
	                    //获取总页数
	                    allPage = document.getElementById("allPage").innerText
	                    if(val>allPage)val = allPage
	                    currpageObj = document.querySelector("input[name='currpage']")
	                    currpageObj.value = val
	                    document.forms[0].submit() //form表单提交
	                }
					function onclickbtn(){   $("#my_button").click(function() {
						   	$("#msg1").val("点击了")				
					          });  }
							  
							function clear(){
								
								document.getElementById('msg1').value = ''
							}
						onclickbtn();	  
					setInterval('clear()',1000);
	            </script>
	        </div>
	        </form>

 <!--新加模态框-->
     <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
						  <h4 class="modal-title" id="myModalLabel">宠物信息新加</h4>
                          <button class="close" data-dismiss="modal" aria-hidden="true">&times;关闭</button>
                         <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
                      </div>
                      <div class="modal-body">
                          <form class="form-horizontal" id="addform" role="form" method="post" action="add_umsg" enctype="multipart/form-data">
                              <div class="form-group">
                                  <label for="sid" class="col-sm-3 control-label">用户编号</label>
                                  <div class="col-sm-9">
									  <input type="hidden"  value="{{pd.page.pages}}" name="lastpage"><!-- 这里是隐藏框里面存放页数值 --尾页 -->
                                       <input type="hidden"  value="{{pd.page.page}}" name="currentpage"><!-- 这里是隐藏框里面存放页数值 --尾页 -->
									  <input type="text" class="form-control" name="bid" id="bid" value="自动分配" readonly>
                                  </div>
                              </div>
                              <div class="form-group">
                                  <label for="sname" class="col-sm-3 control-label">用户名</label>
                                  <div class="col-sm-9">
                                      <input type="text" class="form-control" name="uname1" id="bname" placeholder="用户名" required>
                                  </div>
                              </div>
                              <div class="form-group">
                                  <label class="col-sm-3 control-label">密码</label>
                                  <div class="col-sm-9">
                                      <input type="password" class="form-control" name="password1" id="author" placeholder="密码" required>
                                  </div>
                              </div>
  
                              <div class="form-group">
                                  <label class="col-sm-2 control-label">地址</label>
                                  <div class="col-sm-10">
                                      <input type="text" class="form-control" name="liveaddress1" id="price" placeholder="地址">
                                  </div>
                              </div>
  
                              <div class="form-group">
                                  <label class="col-sm-2 control-label">邮箱</label>
                                  <div class="col-sm-10">
                                      <input type="text" class="form-control" name="address1" id="des" placeholder="邮箱">
                                  </div>
                              </div>
							  
							  <div class="form-group">
							      <label class="control-label">职业</label>
							      <div class="col-sm-12">
							          <input type="text" class="form-control" name="career1" id="des" placeholder="职业"></textarea> 
							      </div>
							  </div>
							  
							  <div class="form-group">
							      <label class="control-label">电话</label>
							      <div class="col-sm-12">
							          <input type="text" class="form-control" name="tel1" id="des" placeholder="电话">
							      </div>
							  </div>
							  
							  <div class="form-group">
							      <label class="control-label">个人信息</label>
							      <div class="col-sm-12">
							          <textarea  type="text" class="form-control" name="usermsg1" id="des" placeholder="个人信息"></textarea> 
							      </div>
							  </div>
							  
				  <!-- 添加宠物图片部分-->
				  <div class="form-group row" style="background-color: cornsilk;">
									 <div class="form-group">
													 <div class="btn btn-default btn-file">
													   <i class="fas fa-paperclip"></i> 添加用户头像
													   <input type="file" onchange="showImg(this)" name="userimg1" id="userimg">
													 </div>
													 <p class="help-block">不超过:10MB</p>
												   </div>
										   <div id="imgContainer" style="margin-top: 10px;"></div>
					<div class="offset-sm-2 col-sm-10">
					<button type="button" class="btn btn-success" onclick="clearadd()">清除图片</button>
					</div>
				  </div> <!-- 添加宠物图片结尾-->
                         
                              <input type="submit" value="提交" id="addbut" style="display: none;">
                          </form>
                      </div>
                      <div class="modal-footer">
                          <button class="btn btn-default" data-dismiss="modal">关闭</button>
                          <button class="btn btn-primary" id="submitbut">提交</button>
                      </div>
                  </div>
              </div>
          </div>
            <!--新加模态框结束-->
        <script>
              $(function(){
                  $("#submitbut").click(function(){
                          $("#addbut").click()
                  });
              })
          </script>
	<script>
	//展示图像有关的
	var fileInput = document.getElementById('userimg');
	  function showImg(obj) {
	    var files = obj.files
	    document.getElementById("imgContainer").innerHTML = getImgsByUrl(files)
	  }
		 //获取图像元素
	  function getImgsByUrl(files) {
	    var elements = ''
	    for (var i = 0; i < files.length; i++) {
	      var url = window.URL.createObjectURL(files[i])
	      elements += "<img src='" + url + "' style='width: 50%;' class='addimg' id='addimg'/>"
	    }
	    return elements
	  }
		//清除添加的图片
					 function clearadd(){
						 var addimg = document.getElementsByClassName('addimg')
						 // var adddel= document.querySelector('#addimg')
						 // var imgContainer= document.querySelector('#imgContainer')
					       addimg.item(addimg).remove()
						  fileInput.value = null;  
					 }
	</script>
	<!-- 修改模态框开始 -->
	<div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
	            <div class="modal-dialog">
	                <div class="modal-content">
	                    <div class="modal-header">
							<h4 class="modal-title" id="myModalLabel2">宠物信息修改</h4>
	                        <button class="close" data-dismiss="modal" aria-hidden="true">&times;关闭</button>
	                    </div>
	                    <div class="modal-body">
	        <form class="form-horizontal" id="modform" role="form" method="post" action="/updateuser" enctype="multipart/form-data">
						<div class="form-group">
							<label for="sid" class="col-sm-3 control-label">用户编号</label>
							<div class="col-sm-9">
								 <input type="hidden"  value="{{pd.page.page}}" name="current_page">
								<input type="text" class="form-control" name="uidu" id="uidu" readonly>
							</div>
						</div>
						<div class="form-group">
						    <label for="sname" class="col-sm-3 control-label">用户名</label>
						    <div class="col-sm-9">
						        <input type="text" class="form-control" name="unameu" id="unameu" placeholder="用户名" required>
						    </div>
						</div>
						<div class="form-group">
						    <label class="col-sm-3 control-label">密码</label>
						    <div class="col-sm-9">
						        <input type="password" class="form-control" name="passwordu" id="passwordu" placeholder="请输入更改后的密码" required>
						    </div>
						</div>
						  
						<div class="form-group">
						    <label class="col-sm-2 control-label">地址</label>
						    <div class="col-sm-10">
						        <input type="text" class="form-control" name="liveaddressu" id="liveaddressu" placeholder="地址">
						    </div>
						</div>
						  
						<div class="form-group">
						    <label class="col-sm-2 control-label">邮箱</label>
						    <div class="col-sm-10">
						        <input type="text" class="form-control" name="addressu" id="addressu" placeholder="邮箱">
						    </div>
						</div>
						
						<div class="form-group">
						    <label class="control-label">职业</label>
						    <div class="col-sm-12">
						        <input type="text" class="form-control" name="careeru" id="careeru" placeholder="职业"></textarea> 
						    </div>
						</div>
						
						<div class="form-group">
						    <label class="control-label">电话</label>
						    <div class="col-sm-12">
						        <input type="text" class="form-control" name="telu" id="telu" placeholder="电话">
						    </div>
						</div>
						
						<div class="form-group">
						    <label class="control-label">个人信息</label>
						    <div class="col-sm-12">
						        <textarea  type="text" class="form-control" name="usermsgu" id="usermsgu" placeholder="个人信息"></textarea> 
						    </div>
						</div>
						<!-- 添加用户头像部分-->
						<div class="form-group row" style="background-color: cornsilk;">
							 <div class="form-group">
											 <div class="btn btn-default btn-file">
											   <i class="fas fa-paperclip"></i> 更换头像
											   <input type="file" onchange="showImgu(this)" name="userimgu" id="userimgu">
											 </div> 
											 <p class="help-block">不超过:10MB</p>
											
										   </div>
										   
										   <div id="imgContaineru2" style="margin-top: 10px;" style="display:block">
										   <img src="" alt="没有相关图片" id="imgreplace">
										   </div>
										   
		                                   <div id="imgContaineru" style="margin-top: 10px;"><!-- 里面会显示图片 --></div>
										   
						 <div class="offset-sm-3 col-sm-9">
							  <span>若没有图片,默认使用原图</span>
							<button type="button" class="btn btn-success" onclick="clearupdate()">清除图片</button>
						  </div>
						</div> <!-- 添加宠物图片结尾-->
	                            <input type="submit" value="提交" id="modbut" style="display: none;">
	                        </form>
	                    </div>
	                    <div class="modal-footer">
	                        <button class="btn btn-default" data-dismiss="modal">关闭</button>
	                        <button class="btn btn-primary" id="submitbut2">提交</button>
	                    </div>
	                </div>
	            </div>
	        </div>
			 <script src="static/admin/js/user_showdownbox.js"></script> 
	    